<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>新标签页</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <!-- 左侧标签栏 -->
        <div class="sidebar">
            <div class="tag-list">
                <div class="tag active">默认</div>
                <!-- 其他标签将通过JS动态添加 -->
            </div>
            <!-- 添加创建标签按钮 -->
            <button class="create-tag-button">创建标签</button>
            <!-- 添加新建图标按钮 -->
            <button class="add-button">新建图标</button>
        </div>

        <!-- 中间内容区 -->
        <div class="main-content">
            <!-- 提示消息 -->
            <div class="message-tip" style="display: none;">
                创建成功！
            </div>
            
            <!-- 搜索框 -->
            <div class="search-container">
                <input type="text" class="search-input" placeholder="请输入关键词...">
            </div>
            
            <!-- 图标展示区 -->
            <div class="icons-container">
                <!-- 图标将通过JS动态加载 -->
            </div>
        </div>

        <!-- 右侧通知区 -->
        <div class="notification-area">
            <h3 class="notification-title">通知中心</h3>
            <div class="notification-container">
                <div class="notification-item">
                    <div class="notification-header">
                        <h4>系统更新提醒</h4>
                        <button class="close-notification">×</button>
                    </div>
                    <div class="notification-content">
                        系统已更新到最新版本，新版本包含多项功能改进和性能优化...
                        <a href="https://example.com/update" target="_blank" class="more-link">[更多]</a>
                    </div>
                </div>
                <div class="notification-item">
                    <div class="notification-header">
                        <h4>新功能发布</h4>
                        <button class="close-notification">×</button>
                    </div>
                    <div class="notification-content">
                        现在支持自定义标签和图标管理，让您的新标签页更个性化...
                        <a href="https://example.com/features" target="_blank" class="more-link">[更多]</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 创建标签的弹出框 -->
    <div class="tag-modal" style="display: none;">
        <div class="modal-content">
            <h2>创建新标签</h2>
            <div class="form-group">
                <label>标签名称：</label>
                <input type="text" id="tag-name" placeholder="请输入标签名称">
            </div>
            <div class="modal-buttons">
                <button class="tag-confirm-btn">确定</button>
                <button class="tag-cancel-btn">取消</button>
            </div>
        </div>
    </div>

    <!-- 新建图标的弹出框 -->
    <div class="modal" style="display: none;">
        <div class="modal-content">
            <h2>新建图标</h2>
            <div class="form-group">
                <label>图标：</label>
                <input type="file" id="icon-upload" accept="image/*">
            </div>
            <div class="form-group">
                <label>名称：</label>
                <input type="text" id="icon-name" placeholder="请输入名称">
            </div>
            <div class="form-group">
                <label>链接：</label>
                <input type="url" id="icon-url" placeholder="请输入URL">
            </div>
            <div class="modal-buttons">
                <button class="confirm-btn">确定</button>
                <button class="cancel-btn">取消</button>
            </div>
        </div>
    </div>

    <!-- 在 container div 后面添加右键菜单 -->
    <div class="context-menu" style="display: none;">
        <div class="menu-item edit-icon">修改</div>
        <div class="menu-item delete-icon">删除</div>
    </div>

    <!-- 在已有的 context-menu 后添加标签的右键菜单 -->
    <div class="tag-context-menu" style="display: none;">
        <div class="menu-item delete-tag">删除标签</div>
    </div>

    <!-- 修改图标的弹出框 -->
    <div class="edit-modal" style="display: none;">
        <div class="modal-content">
            <h2>修改图标</h2>
            <div class="form-group">
                <label>图标：</label>
                <input type="file" id="edit-icon-upload" accept="image/*">
                <img id="current-icon" src="" alt="当前图标" style="width: 48px; height: 48px; margin-top: 8px;">
            </div>
            <div class="form-group">
                <label>名称：</label>
                <input type="text" id="edit-icon-name" placeholder="请输入名称">
            </div>
            <div class="form-group">
                <label>链接：</label>
                <input type="url" id="edit-icon-url" placeholder="请输入URL">
            </div>
            <div class="modal-buttons">
                <button class="edit-confirm-btn">确定</button>
                <button class="edit-cancel-btn">取消</button>
            </div>
        </div>
    </div>

    <script src="js/main.js"></script>
</body>
</html> 